import React, { Component } from 'react';
import { Form, Select, Input, Radio, Checkbox, InputNumber,Button } from 'antd'
import GoBack from "@/components/TheGoBack";
import TheUpload from '@/components/TheUpload'
import TheQuill from "@/components/TheQuill";

export default class HotelServiceAdd extends Component {
    constructor() {
        super()
        this.formRef = React.createRef()
        this.state = {}
    }
    componentDidMount() {
    }
    onFinish(){}
    getFileResult = (value, key) => {
        if (value.length > 0 && value[0].hasOwnProperty('response')) {
            this.formRef.current.setFieldsValue({
                [key]: value[0].response.data
            })
        } else {
            this.formRef.current.setFieldsValue({
                [key]: ''
            })
        }
    };
    /**
     * @desc 设置新闻内容表单默认值
     * */
    setNewsContent = (data) => {
        this.setState({
            productTxt: data
        })
    };
    render() {
        return (
            <div className='p-layout-box' >
                <GoBack history={this.props.history} style={{ margin: 20 }} title="基本信息" />
                <div style={{ height: '100%', overflowY: 'auto', padding: 20 }}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 4,
                        }}
                        ref={this.formRef}
                        onFinish={this.onFinish}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                        }}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="服务类型"
                            name="price"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择服务类型',
                                },
                            ]}
                        >
                            <Select
                                style={{ width: 500 }}
                                defaultValue="1"
                                options={[
                                    {
                                        value: '1',
                                        label: '宠物酒店',
                                    }
                                ]} />
                        </Form.Item>
                        <Form.Item
                            label="服务名称"
                            name="repeatType"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入服务名称',
                                },
                            ]}
                        >
                            <Input style={{ width: 500 }}></Input>
                        </Form.Item>

                        <Form.Item
                            label="服务标签"
                            name="repeatType"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择服务标签',
                                },
                            ]}
                        >
                            <Checkbox.Group>
                                <Checkbox value="猫咪洗护">猫咪洗护</Checkbox>
                                <Checkbox value="狗狗洗护">狗狗洗护</Checkbox>
                                <Checkbox value="狗狗美容">狗狗美容</Checkbox>
                                <Checkbox value="猫咪SAP">猫咪SAP</Checkbox>
                                <Checkbox value="狗狗SAP">狗狗SAP</Checkbox>
                            </Checkbox.Group>
                        </Form.Item>
                        <Form.Item
                            label="用户端是否展示服务"
                            name="repeatType"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择用户端是否展示服务',
                                },
                            ]}
                        >
                            <Radio.Group >
                                <Radio value={1}>不展示</Radio>
                                <Radio value={2}>展示</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="宠物种类"
                            name="repeatType"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择宠物种类',
                                },
                            ]}
                        >
                            <Radio.Group >
                                <Radio value={1}>狗</Radio>
                                <Radio value={2}>猫</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            label="宠物重量(kg)"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入宠物重量',
                                }
                            ]}
                        >
                            <Form.Item
                                name="repeatType"
                                style={{ display: 'inline-block' }}
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入宠物重量',
                                    },
                                ]}
                            >
                                <InputNumber style={{ width: 200 }} min={0} precision={2}></InputNumber>

                            </Form.Item>
                            
                            <div style={{ display: 'inline-block', margin: '0 8px', }}>~</div>
                            <Form.Item
                                style={{ display: 'inline-block', }}
                                name="overRepeatDate"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入宠物重量',
                                    },
                                ]}
                            >
                                <InputNumber style={{ width: 200 }}  min={0} precision={2}></InputNumber>

                            </Form.Item>

                        </Form.Item>


                        <Form.Item
                            label="服务主图"
                            name="activityImg"
                            rules={[
                                {
                                    required: true,
                                    message: '请上传服务主图',
                                },
                            ]}
                        >
                            <TheUpload isConversion={false} getFileResult={(e) => this.getFileResult(e, 'activityImg')} len={1} />
                        </Form.Item>
                        <Form.Item
                            label="服务图片"
                            name="activityImg" rules={[
                                {
                                    required: true,
                                    message: '请上传服务图片',
                                },
                            ]}

                        >
                            <TheUpload isConversion={false} getFileResult={(e) => this.getFileResult(e, 'activityImg')} len={1} />
                        </Form.Item>
                        <Form.Item
                            label="服务价格"
                            name="activityImg"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入服务价格',
                                },
                            ]}
                        >
                            <InputNumber style={{ width: 500 }} min={0} precision={2}></InputNumber>
                        </Form.Item>
                        <Form.Item
                            label="服务说明"
                            name="activityImg"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入服务说明',
                                },
                            ]}
                        >
                            <TheQuill style={{ height: 500 }} defaultValue={" "} setNewsContent={this.setNewsContent} />
                        </Form.Item>
                        <Form.Item label=" " colon={false}>
                            <Button type="primary" htmlType="submit">
                                创建服务
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        );
    }
}
